<template>
  <div class="solveManage">
    <!-- 顶部查询表单 -->
    <div class="topForm">
      <el-form ref="searchForm" :model="searchForm" label-width="70px"  :inline="true" size="mini" class="searchBox">
        <el-row>
          <el-col :span="3.5">
            <el-form-item label="订单号：" prop="odcCode">
              <el-input v-model="searchForm.odcCode" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="委托人：" prop="odcConsigner">
              <el-input v-model="searchForm.odcConsigner" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="下单时间：" prop="ordCreatetimeStart">
              <el-date-picker v-model="searchForm.ordCreatetimeStart"  type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="~" prop="ordCreatetimeEnd" label-width="10px">
              <el-date-picker v-model="searchForm.ordCreatetimeEnd" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-button @click="searchBtn" type="primary" size="mini">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 解决方案按钮组 -->
    <div class="btnBox">
      <el-button plain size="mini"  type="primary" @click="delOrder">订单关闭</el-button>
    </div>
    <!-- 主页主体表格 -->
    <div class="tableBox">
      <!-- 上方解决方案表格 -->
      <div class="topTable">
        <el-table :data="mainTopTableData" border :height="mainTopHeight" :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="mainTopRowClick"  @row-dblclick='rowdbClick'>
          <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
          <el-table-column prop="ORD_STATUS_NAME" label="订单状态"  show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ORD_CREATETIME" label="下单时间" width="160px"  show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ODC_CODE" label="订单号" width="200" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="ODC_CLT_NAME" label="客户"  show-overflow-tooltip  sortable ></el-table-column>
          <el-table-column prop="ODC_CONSIGNER" label="委托人"  show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="GOD_OWNER" label="货主"  show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ODC_LINKPERSON" label="联系人"  show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ODC_LINKPHONE" label="联系电话" width="180" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ODC_TEL" label="手机" width="160"  show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="GOD_ORIGINE" label="发货地"  show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="GOD_DESTINATION" label="目的地"  show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ORD_COUNTPRICE" label="订单价格"  show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ORD_COST" label="结费价格"  width="140" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ODC_SOURCE" label="来源"  show-overflow-tooltip sortable >
               <template slot-scope="scope">
                  <span v-if="scope.row.ODC_SOURCE =='OFFLINE'">线下</span>
                  <span v-if="scope.row.ODC_SOURCE =='ONLINE'">线上</span>
              </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          ref="pagination"
          small
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Pagination.currentPage"
          :page-sizes="Pagination.pageSizeList"
          :page-size="Pagination.PageSize"
          :layout="Pagination.layout"
          :total="Pagination.total">
        </el-pagination>
      </div>
    </div>

    <!-- 新增订单弹出框 -->
    <el-dialog v-el-drag-dialog :title="dialogTitle" :visible.sync="mainDialog" width="60%" @close="basicClose" :close-on-click-modal='false'>
      <div class="dialogBox">
        <!-- 基础信息 -->
        <div class="basicBox">
          <div class="basicTitle">
            <div class="icon">
              <span>1</span>
            </div>
            <span class="order_span2">基础信息</span>
          </div>
          <el-form ref="basicForm" :model="basicForm" :rules="basicRules" label-width="130px"  :inline="true" size="mini">
            <el-row>
              <el-col :span="8">
                <el-form-item label="客户:" prop="customer">
                  <el-popover placement="bottom" width="500" @show="nowShow" @hide="nowHide" trigger="click">
                    <selectedComponent :selectMsg="selectMsg"></selectedComponent>
                    <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                      <el-input v-model="basicForm.customer" clearable @focus="customerMsg" size="mini"></el-input>
                      <span class="el-input__suffix">
                        <span class="el-input__suffix-inner">
                          <i class="el-select__caret el-input__icon " :class="isShow?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                        </span>
                      </span>
                    </div>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="委托人:" prop="entrustor">
                  <el-input v-model="basicForm.entrustor"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="货主:" prop="shipper">
                  <el-input v-model="basicForm.shipper"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="联系人:" prop="connect">
                  <el-input v-model="basicForm.connect"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话:" prop="connectPhone">
                  <el-input v-model="basicForm.connectPhone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机:" prop="phone">
                  <el-input v-model="basicForm.phone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="Email:" prop="email">
                  <el-input v-model="basicForm.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="QQ:" prop="qq">
                  <el-input v-model="basicForm.qq"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="微信:" prop="wechat">
                  <el-input v-model="basicForm.wechat"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="发货方:" prop="sendGoods">
                  <el-popover placement="bottom" width="500" @show="nowShow1" @hide="nowHide1" trigger="click">
                    <selectedComponent :selectMsg="selectMsg"></selectedComponent>
                    <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                      <el-input v-model="basicForm.sendGoods" clearable @input="sendGoodsMsg" size="mini"></el-input>
                      <span class="el-input__suffix">
                        <span class="el-input__suffix-inner">
                          <i class="el-select__caret el-input__icon " :class="isShow1?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                        </span>
                      </span>
                    </div>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发货方联系人:" prop="sendGoodsConnect">
                  <el-input v-model="basicForm.sendGoodsConnect"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发货方联系方式:" prop="sendGoodsPhone">
                  <el-input v-model="basicForm.sendGoodsPhone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="收货方:" prop="getGoods">
                  <el-popover placement="bottom" width="500" @show="nowShow2" @hide="nowHide2" trigger="click">
                    <selectedComponent :selectMsg="selectMsg"></selectedComponent>
                    <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                      <el-input v-model="basicForm.getGoods" clearable @focus="getGoodsMsg" size="mini"></el-input>
                      <span class="el-input__suffix">
                        <span class="el-input__suffix-inner">
                          <i class="el-select__caret el-input__icon " :class="isShow2?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                        </span>
                      </span>
                    </div>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货方联系人:" prop="getGoodsConnect">
                  <el-input v-model="basicForm.getGoodsConnect"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货方联系方式:" prop="getGoodsPhone">
                  <el-input v-model="basicForm.getGoodsPhone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="备注:" prop="basicNote">
                  <el-input type="textarea" v-model="basicForm.basicNote" style="width: 600px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 服务信息 -->
        <div class="serveBox">
          <div class="basicTitle">
            <div class="icon">
              <span>2</span>
            </div>
            <span class="order_span2">服务信息</span>
          </div>
          <div class="serveContent">
            <div class="serveContentLeft">
              <el-form ref="serveForm" :model="serveForm" :rules="serveRules" label-width="100px"  :inline="true" size="mini">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="解决方案:" prop="solveMethods">
                      <el-popover placement="bottom" width="500" @show="nowShow3" @hide="nowHide3" trigger="click">
                        <selectedComponent :selectMsg="selectMsg"></selectedComponent>
                        <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                          <el-input v-model="serveForm.solveMethods" clearable @focus="solveMethodsMsg" size="mini"></el-input>
                          <span class="el-input__suffix">
                            <span class="el-input__suffix-inner">
                              <i class="el-select__caret el-input__icon " :class="isShow3?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                            </span>
                          </span>
                        </div>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="作业天数:" prop="workDays">
                      <el-input v-model="serveForm.workDays" clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="运输分类:" prop="transportCate">
                      <el-select v-model="serveForm.transportCate" filterable clearable :disabled="transPortDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="进/出口:" prop="inOutRadio">
                      <el-radio v-model="serveForm.inOutRadio" label="1">进口</el-radio>
                      <el-radio v-model="serveForm.inOutRadio" label="2">出口</el-radio>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="起始地:" prop="startPlace">
                      <el-select v-model="serveForm.startPlace" filterable clearable>
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="目的地:" prop="endPlace">
                      <el-select v-model="serveForm.endPlace" filterable clearable>
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="起始港/站:" prop="startPort">
                      <el-select v-model="serveForm.startPort" filterable clearable>
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="目的港/站:" prop="endPort">
                      <el-select v-model="serveForm.endPort" filterable clearable>
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <!-- 箱信息 -->
            <div class="serveContentRight">
              <el-table :data="serveTableData" border :height="serveTableHeight" :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }" highlight-current-row>
                <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                <el-table-column prop="boxSize" label="尺寸" show-overflow-tooltip sortable>
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.boxSize" clearable size="mini" v-if="scope.row.status">
                      <el-option
                        v-for="item in boxSizeList"
                        :key="item.label"
                        :label="item.value"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                    <span v-else>{{scope.row.boxSize}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="boxStyle" label="箱型" show-overflow-tooltip sortable>
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.boxStyle" clearable size="mini" v-if="scope.row.status">
                      <el-option
                        v-for="item in boxStyleList"
                        :key="item.label"
                        :label="item.value"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                    <span v-else>{{scope.row.boxStyle}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="boxNum" label="数量" show-overflow-tooltip sortable>
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.boxNum" clearable size="mini" v-if="scope.row.status"></el-input>
                    <span v-else>{{scope.row.boxNum}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 解决方案明细 -->
        <div class="solveMethodsDetailBox">
          <div class="basicTitle">
            <div class="icon">
              <span>3</span>
            </div>
            <span class="order_span2">解决方案明细</span>
          </div>
          <!-- 解决方案表格 -->
          <el-table :data="solveTableData" border :height="solveTableHeight" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" highlight-current-row>
            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
            <el-table-column prop="tayNo" label="服务代码" width="110px" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="tayIeflag" label="供应商" width="100px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="cltName" label="经营人" width="100px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayTaskmodels" label="起始地" width="100px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayStates" label="目的地" width="90px" show-overflow-tooltip  sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="起始港" width="90px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="目的港" width="90px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="20GP价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="20GP币种" width="120px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="40GP价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="40GP币种" width="120px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="40HQ价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tdrName" label="40HQ币种" width="120px" show-overflow-tooltip  sortable></el-table-column>
            <el-table-column prop="tayContact" label="创建人" width="90px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayContact" label="创建时间" width="110px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayContact" label="修改人" width="100px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayContact" label="修改时间" width="110px" show-overflow-tooltip sortable ></el-table-column>
          </el-table>
        </div>
        <!-- 货物信息 -->
        <div class="goodsInfoBox">
          <div class="basicTitle">
            <div class="icon">
              <span>4</span>
            </div>
            <span class="order_span2">货物信息</span>
          </div>
          <!-- 解决方案表格 -->
          <el-table :data="goodsTableData" border :height="goodsTableHeight" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" highlight-current-row>
            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
            <el-table-column prop="tayNo" label="货物分类" show-overflow-tooltip sortable>
              <template slot-scope="scope">
                <el-select v-model="scope.row.boxSize" clearable size="mini" v-if="scope.row.status">
                  <el-option
                    v-for="item in boxSizeList"
                    :key="item.label"
                    :label="item.value"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <span v-else>{{scope.row.boxSize}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="tayIeflag" label="中文品名" show-overflow-tooltip sortable >
              <template slot-scope="scope">
                    <el-input v-model="scope.row.tayIeflag" clearable size="mini" v-if="scope.row.status"></el-input>
                    <span v-else>{{scope.row.tayIeflag}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="cltName" label="英文品名" show-overflow-tooltip sortable >
              <template slot-scope="scope">
                    <el-input v-model="scope.row.cltName" clearable size="mini" v-if="scope.row.status"></el-input>
                    <span v-else>{{scope.row.cltName}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="tayTaskmodels" label="件数" show-overflow-tooltip sortable >
               <template slot-scope="scope">
                    <el-input v-model="scope.row.tayTaskmodels" clearable size="mini" v-if="scope.row.status"></el-input>
                    <span v-else>{{scope.row.tayTaskmodels}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="tayStates" label="重量"  show-overflow-tooltip  sortable >
              <template slot-scope="scope">
                    <el-input v-model="scope.row.tayStates" clearable size="mini" v-if="scope.row.status"></el-input>
                    <span v-else>{{scope.row.tayStates}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="tayWrkdate" label="体积" show-overflow-tooltip sortable >
              <template slot-scope="scope">
                    <el-input v-model="scope.row.tayWrkdate" clearable size="mini" v-if="scope.row.status"></el-input>
                    <span v-else>{{scope.row.tayWrkdate}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="tayWrkdate" label="包装" show-overflow-tooltip sortable >
              <template slot-scope="scope">
                <el-select v-model="scope.row.boxSize" clearable size="mini" v-if="scope.row.status">
                  <el-option
                    v-for="item in boxSizeList"
                    :key="item.label"
                    :label="item.value"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <span v-else>{{scope.row.boxSize}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 拖车服务 -->
        <div class="truckServiceBox">
          <div class="basicTitle">
            <div class="icon">
              <span>5</span>
            </div>
            <span class="order_span2">拖车服务</span>
          </div>
          <!-- 发货地，目的地拖车 -->
          <div class="serviceBox">
            <!-- 发货地服务 -->
            <div class="startBox">
              <div class="startTitle">发货地服务</div>
              <el-checkbox style="padding: 0 0 10px 10px;" v-model="startChecked">拖车：</el-checkbox>
              <el-form ref="startCarForm" :model="startCarForm" :rules="startCarRules" label-width="80px" :inline="true" size="mini">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="联系人:" prop="connect">
                      <el-input v-model="startCarForm.connect" clearable :disabled="startDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系电话:" prop="connectPhone" label-width="90px">
                      <el-input v-model="startCarForm.connectPhone" clearable :disabled="startDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="地址:" prop="province">
                      <el-select v-model="startCarForm.province" filterable clearable :disabled="startDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="town">
                      <el-select style="margin-left: 10px" v-model="startCarForm.town" filterable clearable :disabled="startDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="county">
                      <el-select style="margin-left: 10px" v-model="startCarForm.county" filterable clearable :disabled="startDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item prop="detailAddress" label="    " class="detailAddressBox">
                      <el-input v-model="startCarForm.detailAddress" placeholder="请输入详细地址" clearable :disabled="startDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <!-- 目的地服务 -->
            <div class="endBox">
              <div class="endTitle">目的地服务</div>
              <el-checkbox style="padding: 0 0 10px 10px;" v-model="endChecked">拖车：</el-checkbox>
              <el-form ref="endCarForm" :model="endCarForm" :rules="endCarRules" label-width="80px" :inline="true" size="mini">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="联系人:" prop="connect">
                      <el-input v-model="endCarForm.connect" clearable :disabled="endDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系电话:" prop="connectPhone" label-width="90px">
                      <el-input v-model="endCarForm.connectPhone" clearable :disabled="endDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="地址:" prop="province">
                      <el-select v-model="endCarForm.province" filterable clearable :disabled="endDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="town">
                      <el-select style="margin-left: 10px" v-model="endCarForm.town" filterable clearable :disabled="endDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="county">
                      <el-select style="margin-left: 10px" v-model="endCarForm.county" filterable clearable :disabled="endDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item prop="detailAddress" label="    " class="detailAddressBox">
                      <el-input v-model="endCarForm.detailAddress" placeholder="请输入详细地址" clearable :disabled="endDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 附件信息 -->
        <div class="attachmentInfoBox">
          <div class="basicTitle">
            <div class="icon">
              <span>6</span>
            </div>
            <span class="order_span2">附件信息</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mainDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {orderCloseList,orderCloseQuery} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
// import secondComponent from '../theOrderManage/secondComponent'
import selectedComponent from '../theOrderManage/selectedComponent'
export default {
  name: 'router.theOrderManage',
  mixins: [resizeMixin, paginationMixin],
  data() {
    return {
      itemData:[],//当前行数据
      searchForm: {
        odcCode: '', // 订单号
        odcConsigner: '', // 委托人
        ordCreatetimeStart: '', // 下单时间  开始
        ordCreatetimeEnd: '', // 下单时间  结束
      },
      placeLists: [], // 起始地，目的地下拉框数据
      statusPlace: [], // 状态下拉框数据
      mainTopTableData: [], // 主页上方 解决方案表格数据
      mainTopHeight: 800, // 主页上方 表格高度

      dialogStatus: '', // 判断弹窗是点击哪个弹出
      dialogTitle: '', // 新增弹窗标题
      mainDialog: false, // 控制新增弹窗的出现与隐藏
      // 基础信息表单
      basicForm: {
        customer: '', // 客户
        entrustor: '', // 委托人
        shipper: '', // 货主
        connect: '', // 联系人
        connectPhone: '', // 联系电话
        phone: '', // 手机
        email: '', // email
        qq: '', // qq
        wechat: '', // 微信
        sendGoods: '', // 发货方
        sendGoodsConnect: '', // 发货方联系人
        sendGoodsPhone: '', // 发货方联系方式
        getGoods: '', // 收货方
        getGoodsConnect: '', // 收货方联系人
        getGoodsPhone: '', // 收货方联系方式
        basicNote: '', // 备注
      },
      basicRules: {
        customer: [
          { required: true, message: '请选择客户', trigger: 'blur' },
        ],
        entrustor: [
          { required: true, message: '请输入委托人', trigger: 'blur' },
        ],
        shipper: [
          { required: true, message: '请输入货主', trigger: 'blur' },
        ],
        connect: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
        ],
        sendGoods: [
          { required: true, message: '请选择发货方', trigger: 'blur' },
        ],
        sendGoodsConnect: [
          { required: true, message: '请输入发货方联系人', trigger: 'blur' },
        ],
        sendGoodsPhone: [
          { required: true, message: '请输入发货方联系方式', trigger: 'blur' },
        ],
        getGoods: [
          { required: true, message: '请选择收货方', trigger: 'blur' },
        ],
        getGoodsConnect: [
          { required: true, message: '请输入收货方联系人', trigger: 'blur' },
        ],
        getGoodsPhone: [
          { required: true, message: '请输入收货方联系方式', trigger: 'blur' },
        ],
      },
      // 服务信息表单
      serveForm: {
        solveMethods: '', // 解决方案
        workDays: '', // 作业天数
        transportCate: '', // 运输分类
        inOutRadio: '1', // 进出口
        startPlace: '', // 起始地
        endPlace: '', // 目的地
        startPort: '', // 起始港站
        endPort: '', // 目的港站
      },
      serveRules: {
        workDays: [
          { required: true, message: '请输入作业天数', trigger: 'blur' },
        ],
        transportCate: [
          { required: true, message: '运输分类不能为空', trigger: 'blur' },
        ],
        inOutRadio: [
          { required: true, message: '请选择进出口', trigger: 'blur' },
        ],
        startPlace: [
          { required: true, message: '请选择起始地', trigger: 'blur' },
        ],
        endPlace: [
          { required: true, message: '请选择目的地', trigger: 'blur' },
        ],
        startPort: [
          { required: true, message: '请选择起始港站', trigger: 'blur' },
        ],
        endPort: [
          { required: true, message: '请选择目的港站', trigger: 'blur' },
        ],
      },
      transPortDisabled: true, // 控制新增弹窗 服务信息 运输分类下拉禁止输入
      serveTableData: [], // 服务信息表格数据
      serveTableHeight: 180, // 服务信息表格高度
      solveTableData: [], // 解决方案明细表格数据
      solveTableHeight: 160, // 解决方案明细表格高度
      goodsTableData: [], // 货物信息表格数据
      goodsTableHeight: 160, // 货物信息表格高度
      // 拖车服务  发货地服务
      startCarForm: {
        connect: '', // 联系人
        connectPhone: '', // 联系电话
        province: '', // 地址   省
        town: '', // 地址   市
        county: '', // 地址   区县
        detailAddress: '', // 详细地址
      },
      startCarRules:{
        connect: [
          { required: true, message: '联系人不能为空', trigger: 'blur' },
        ],
        connectPhone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
        ],
        province: [
          { required: true, message: '省份不能为空', trigger: 'blur' },
        ],
        town: [
          { required: true, message: '市不能为空', trigger: 'blur' },
        ],
        county: [
          { required: true, message: '区县不能为空', trigger: 'blur' },
        ],
      },
      // 拖车服务  目的地服务
      endCarForm: {
        connect: '', // 联系人
        connectPhone: '', // 联系电话
        province: '', // 地址   省
        town: '', // 地址   市
        county: '', // 地址   区县
        detailAddress: '', // 详细地址
      },
      endCarRules:{
        connect: [
          { required: true, message: '联系人不能为空', trigger: 'blur' },
        ],
        connectPhone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
        ],
        province: [
          { required: true, message: '省份不能为空', trigger: 'blur' },
        ],
        town: [
          { required: true, message: '市不能为空', trigger: 'blur' },
        ],
        county: [
          { required: true, message: '区县不能为空', trigger: 'blur' },
        ],
      },
      startChecked: false, // 控制发货地拖车勾选框
      endChecked: false, // 控制目的地拖车勾选框
      startDisabled: true, // 控制发货地输入框禁止输入
      endDisabled: true, // 控制目的地输入框禁止输入
      // 下拉框是表格的相关操作
      isShow:false,
      isShow1:false,
      isShow2:false,
      isShow3:false,
      isShow4:false,
      selectMsg:'',
    }
  },
  computed: {
  },
  components: {
    // secondComponent,
    selectedComponent
  },
  watch: {
    startChecked() {
      if(this.startChecked == false) {
        this.startDisabled = true
      }else {
        this.startDisabled = false
      }
    },
    endChecked() {
      if(this.endChecked == false) {
        this.endDisabled = true
      }else {
        this.endDisabled = false
      }
    },
  },
  mounted() {
  },
  created() {
    this.refreshList()
  },
  methods: {
    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      orderCloseList({
        odcCode: this.searchForm.odcCode, // 订单号
        odcConsigner:this.searchForm.odcConsigner, // 委托人
        ordCreatetimeStart: this.searchForm.ordCreatetimeStart, // 下单时间  开始
        ordCreatetimeEnd: this.searchForm.ordCreatetimeEnd, // 下单时间  结束
        PageIndexs:this.Pagination.currentPage.toString(),
        PageSizes:this.Pagination.pageSize.toString()
      }).then(response => {
        this.mainTopTableData = response.data.FTKJWLHYPT
        updateTotal(Number(response.data.total.FTKJWLHYPT))
      })
    },
    //查询
    searchBtn(){
      this.refreshList()
    },
    // 双击查看
    rowdbClick(){
      // this.mainDialog = true

    },
    mainTopRowClick(row){
      this.itemData = row
    },
    // 订单关闭
    delOrder() {
      if(Object.keys(this.itemData).length == 0){
        this.$alert('请选择需要关闭的订单！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(this.itemData.ORD_STATUS_NAME == '订单关闭'){
        this.$alert('订单已关闭！不允许重复操作！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确定关闭该订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(()=>{
        orderCloseQuery({ordId:this.itemData.ORD_ID}).then(() =>{
          this.$message({
            type: 'success',
            message: '关闭成功'
          })
          this.refreshList()
        })
      })

    },
    // 控制下拉框弹出表格
    nowShow() {
      this.isShow = true
    },
    nowShow1() {
      this.isShow1 = true
    },
    nowShow2() {
      this.isShow2 = true
    },
    nowShow3() {
      this.isShow3 = true
    },
    nowShow4() {
      this.isShow4 = true
    },
    nowHide(){
      this.isShow = false
    },
    nowHide1(){
      this.isShow1 = false
    },
    nowHide2(){
      this.isShow2 = false
    },
    nowHide3(){
      this.isShow3 = false
    },
    nowHide4(){
      this.isShow4 = false
    },
    // 下拉框为表格的焦点获取事件
    // 客户
    customerMsg() {
      this.selectMsg = 'customer'
    },
    // 发货方
    sendGoodsMsg() {
      this.selectMsg = 'sendGoods'
    },
    // 收货方
    getGoodsMsg() {
      this.selectMsg = 'getGoods'
    },
    // 解决方案
    solveMethodsMsg() {
      this.selectMsg = 'solveMethods'
    },
    // 作业动态
    workDynamicMsg() {
      this.selectMsg = 'workDynamic'
    },

    // 监听弹窗关闭
    basicClose() {
      this.dialogStatus = ''
    },
    // 弹窗保存按钮
    dialogSave() {
      this.mainDialog = false
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .searchBox  .el-input__inner{
  width: 100%;
}
.solveManage {
  .topForm {
    padding-top: 10px;
  }
  .btnBox {
    padding-left: 10px;
  }
  .tableBox {
    .topTable {
      padding-top: 10px;
    }
    .block {
      height: 40px;
    }
    ::v-deep .botTable {
      .el-collapse-item__header {
        padding-left: 10px;
      }
      .el-collapse-item__content {
        padding-bottom: 0;
      }
      .optServiceInfo {
        padding-left: 10px;
        margin-bottom: 5px;
      }
    }
  }
}
// 弹窗内的样式
.dialogBox {
  width: 100%;
  // height: 700px;
  .basicBox {
    width: 100%;
    height: 340px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    ::v-deep .el-select {
      .el-input__inner {
        width: 178px;
      }
    }
  }
  .serveBox {
    width: 100%;
    height: 280px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    .serveContent {
      margin-top: 50px;
      width: 100%;
      height: 218px;
      display: flex;
      justify-content: space-between;
      // background-color: #175993;
      .serveContentLeft {
        width: 60%;
        height: 100%;
        border-right: 1px solid #ccc;
        // background-color: #175993;
      }
      .serveContentRight {
        width: 39%;
        height: 100%;
        // background-color: aqua;
        .srBtnBox {
          margin-bottom: 5px;
        }
      }
    }
  }
  .solveMethodsDetailBox {
    width: 100%;
    height: 220px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
  }
  .goodsInfoBox {
    width: 100%;
    height: 280px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    .goodsBtnBox {
      padding-left: 15px;
      margin-bottom: 15px;
    }
  }
  .truckServiceBox {
    width: 100%;
    height: 260px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    .serviceBox {
      width: 100%;
      height: 195px;
      display: flex;
      justify-content: center;
      align-items: center;
      .startBox {
        width: 50%;
        height: 100%;
        border-right: 1px solid #ccc;
        .startTitle {
          padding-left: 10px;
          font-weight: 600;
          color: #000;
        }
        .detailAddressBox {
          ::v-deep .el-input__inner {
            width: 430px;
          }
        }
        ::v-deep .el-input__inner {
          width: 140px;
        }
      }
      .endBox {
        width: 50%;
        height: 100%;
        .endTitle {
          padding-left: 10px;
          font-weight: 600;
          color: #000;
        }
        .detailAddressBox {
          ::v-deep .el-input__inner {
            width: 430px;
          }
        }
        ::v-deep .el-input__inner {
          width: 140px;
        }
      }
    }
  }
  .attachmentInfoBox {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
  }
  .agreeFeeInfoBox {
    margin: 20px 0;
    height: 110px;
    width: 100%;
    border: 1px solid #ccc;
  }
  .auditInfoBox {
    width: 100%;
    height: 130px;
    border: 1px solid #ccc;
    .auditInfoBot {
      width: 100%;
      // height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 400px 0 20px;
    }
  }
}
::v-deep .searchBox {
  .el-form-item {
    display: flex;
    justify-content: space-between;
  }
  .el-checkbox {
    padding-top: 6px;
    margin-right: 0;
  }
  .el-form-item__label {
    padding: 0;
  }
  .el-input__inner {
    width: 150px;
  }
}
::v-deep .el-dialog {
  margin-top: 5vh !important;
}

// 弹窗标题样式
.basicTitle {
  width: 100%;
  // border: 1px solid #dfdfdf;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 0 10px #ccc;
  position: relative;
  display: block;
  float: left;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.basicTitle span {
  width: 150px;
  height: 50px;
  display: block;
  float: left;
  font-size: 18px;
  color: #fff;
  background: #175993;
  text-align: center;
  line-height: 50px;
}
.basicTitle .icon {
  width: 50px;
  height: 50px;
  background: #175993;
  display: block;
  float: left;
  span {
    color: #fff;
    font-size: 3rem;
    text-align: left;
    padding-left: 1.4rem;
  }
}
.basicTitle .order_span2 {
  width: auto;
  height: 50px;
  padding: 0px 15px;
  display: block;
  float: left;
  font-size: 18px;
  background: none;
  color: #33495e;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
}
</style>
